'use client';

import { useState, useEffect } from 'react';
import QRCode from 'qrcode';

interface QRCodeWrapperProps {
  value: string;
  size?: number;
}

export default function QRCodeWrapper({ value, size = 128 }: QRCodeWrapperProps) {
  const [qrCodeUrl, setQrCodeUrl] = useState('');

  useEffect(() => {
    if (value) {
      QRCode.toDataURL(value, { width: size })
        .then(url => {
          setQrCodeUrl(url);
        })
        .catch(err => {
          console.error('生成二维码失败:', err);
        });
    }
  }, [value, size]);

  if (!qrCodeUrl) {
    return <div>正在加载二维码...</div>;
  }

  return (
    <div className="bg-white p-4 rounded-md">
      <img src={qrCodeUrl} alt="QR Code" />
    </div>
  );
} 